<template>
  <div>
    <a-row>
      <a-col :span="24">
        <div @click="back"
             style="cursor:pointer;font-family: Microsoft YaHei;font-weight: bolder;margin-bottom: 10px;color: #1D79FA;height:25px;display: flex">
          <img style="width: 28px;height: 19px;margin-right: 10px" src="../../../assets/icon/icon-15.png">
          返回
        </div>
      </a-col>
      <a-col :span="16" style="padding-right:20px;">
        <a-calendar style="background: #fff;" :header-render="headerRender">
          <ul slot="dateCellRender" slot-scope="value" class="events">
            <li v-for="item in getListData(value)" :key="item.content">
              <a-badge :status="item.type" :text="item.content"/>
            </li>
          </ul>
          <template slot="monthCellRender" slot-scope="value">
            <div v-if="getMonthData(value)" class="notes-month">
              <section>{{ getMonthData(value) }}</section>
              <span>Backlog number</span>
            </div>
          </template>
        </a-calendar>
      </a-col>
      <a-col :span="8" style="background: #fff;">
        <div class="inspection">
          <a-row style="padding: 5px 10px;background: #6679A2">
            <a-col :span="12">
              <a-button style="border: none;background: #6679A2;color: #fff" icon="bar-chart">
                巡检明细
              </a-button>
            </a-col>
            <a-col :span="12">
              <a-button style="margin-right: 10px;">年</a-button>
              <a-button style="margin-right: 10px;">季</a-button>
              <a-button style="">日</a-button>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <div id="inspection" style="height: 360px;width:100%;">
              </div>
            </a-col>
          </a-row>
          <a-row style="padding: 5px 10px;background: #6679A2;">
            <a-col :span="12" style="">
              <a-button style="border: none;background: #6679A2;color: #fff" icon="bar-chart">
                巡检完成率
              </a-button>
            </a-col>
            <a-col :span="12">
              <a-button style="margin-right: 10px">年</a-button>
              <a-button style="margin-right: 10px">季</a-button>
              <a-button>日</a-button>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <div id="inspectionCompletionRate" style="height: 360px;width:100%;"></div>
            </a-col>
          </a-row>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script>

export default {
  data() {
    return {
      testList: [
        {
          date: "2021-08-10",
          listData: [
            {type: 'warning', content: '未巡检'},
          ],
        },
        {
          date: "2021-06-19",
          listData: [
            {type: 'warning', content: '未巡检'},
          ],
        },
        {
          date: "2021-06-28",
          listData: [
            {type: 'success', content: '已巡检'},
          ],
        },
      ],
    }
  },
  mounted() {
    this.inspectionEcharts()
    this.completionRate()
    var b = document.getElementsByClassName("ant-badge");
    console.log(b.parentNode)
  },
  methods: {
    // 巡检日记
    inspectionEcharts() {
      this.allEcharts('inspection')
    },
    completionRate() {
      this.allEcharts('inspectionCompletionRate')
    },
    allEcharts(title) {
      var echarts = require('echarts')
      var roseCharts = document.getElementById('' + title) // 对应地使用ByClassName
      // 通过for循环，在相同class的dom内绘制元素
      var myChart = echarts.init(roseCharts)

      myChart.setOption({
        grid: {
          left: '8%',
          bottom: '15%',
          top: '20%',
          right: '2%'
        },
        // color: ['#298DFF', ' #33CA66','yellow'],
        barWidth: 14,
        title: {
          // text: '世界人口总量',
          // subtext: '数据来自网络'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        legend: {
          // left: '0%',
          top: '10',
          x: 'center', //可设定图例在左、右、居中
          textStyle: {
            //图例文字的样式
            color: '#333',
            fontSize: 12
          },
          data: ['已完成', '未完成']
        },
        xAxis: {
          type: 'category',
          splitLine: {
            show: false // 去除网格线
          },
          axisLine: {
            lineStyle: {
              type: 'solid',
              color: '#333', // 坐标线的颜色
              width: '1'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#333' //坐标值的颜色
            },
            formatter: function (params) {
              var newParamsName = ''
              var paramsNameNumber = params.length //总字数
              var provideNumber = 5 //一行显示几个字
              var rowNumber = Math.ceil(paramsNameNumber / provideNumber)
              if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                  var tempStr = ''
                  var start = p * provideNumber
                  var end = start + provideNumber
                  if (p == rowNumber - 1) {
                    tempStr = params.substring(start, paramsNameNumber)
                  } else {
                    tempStr = params.substring(start, end) + '\n'
                  }
                  newParamsName += tempStr
                }
              } else {
                newParamsName = params
              }
              return newParamsName
            }
          },
          boundaryGap: [0, 0.01],
          data: [
            '1',
            '2',
            '3',
            '4',
            '5',
            '6',
          ]
        },
        yAxis: {
          type: 'value',
          splitLine: {
            // show: false // 去除网格线
            lineStyle: {
              color: '#E8E8E8',
              type: 'dashed' //设置间隔线为虚线
            }
          },
          axisTick: {
            show: false //小横线
          },
          splitArea: {
            // show: true // 保留网格区域
          },
          axisLine: {
            show: false, // 去除纵向边框线
            lineStyle: {
              type: 'solid',
              color: '#BFBFBF', // 坐标线的颜色
              width: '1'
            }
          },
          axisLabel: {
            textStyle: {
              color: '#595959' //坐标值的颜色
            }
          }
        },
        series: [
          {
            name: '已完成',
            type: 'bar',
            stack: '余额',
            barMaxWidth: 30,
            data: [120, 132, 101, 134, 90, 230],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 1,
                  color: "#4689FF" // 0% 处的颜色
                },
                  {
                    offset: 0,
                    color: "#4689FF" // 100% 处的颜色
                  }
                ], false),
              },
            },
          },
          {
            name: '未完成',
            type: 'bar',
            stack: '余额',
            barMaxWidth: 30,
            data: [220, 182, 191, 234, 290, 330],
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 1,
                  color: "#F34336" // 0% 处的颜色
                },
                  {
                    offset: 0,
                    color: "#F34336" // 100% 处的颜色
                  }
                ], false),
              },
            },
          },
        ]
      })
    },
    back() {
      this.$router.push('/wfinfo/management/Inspection')
    },
    getListData(value) {
      console.log(value.format("YYYY-MM-DD"))
      let listData;
      //遍历数组
      this.testList.forEach(e => {
        //让数组的date与遍历到日历的那天的日期值相匹配
        if (e.date == value.format("YYYY-MM-DD")) {
          listData = e.listData;
        }
      });
      return listData || [];
      // let listData;
      // switch (value.date()) {
      //   case 8:
      //     listData = [
      //       {type: 'warning', content: '未巡检'},
      //     ];
      //     break;
      //   case 10:
      //     listData = [
      //       {type: 'warning', content: '未巡检'},
      //     ];
      //     break;
      //   case 15:
      //     listData = [
      //       {type: 'warning', content: '未巡检'},
      //     ];
      //     break;
      //   case 20:
      //     listData = [
      //       {type: 'success', content: '正常'},
      //     ];
      //     break;
      //   default:
      // }
      // return listData || [];
    },
    getMonthData(value) {
      if (value.month() === 8) {
        return 1394;
      }
    },
    headerRender({value, type, onChange, onTypeChange}) {
      const start = 0;
      const end = 12;
      const monthOptions = [];
      const current = value.clone();
      const localeData = value.localeData();
      const months = [];
      for (let i = 0; i < 12; i++) {
        current.month(i);
        months.push(localeData.monthsShort(current));
      }
      for (let index = start; index < end; index++) {
        monthOptions.push(
          <a-select-option class="month-item" key={`${index}`}>
            {months[index]}
          </a-select-option>,
        )
      }
      const month = value.month();

      const year = value.year();
      const options = [];
      for (let i = year - 10; i < year + 10; i += 1) {
        options.push(
          <a-select-option key={i} value={i} class="year-item">
            {i}
          </a-select-option>,
        );
      }
      // <div style={{ marginBottom: '10px' }}>Custom header </div>
      return (
        <div>
          <a-row style="background:#6679A2;">
            <a-col span="24" style={{padding: '10px 0'}}>
              <a-button style={{border: 'none', marginRight: '50px', color: '#fff'}} type="link">
                巡检日历
              </a-button>
              <a-select
                dropdownMatchSelectWidth={false}
                class="my-year-select"
                onChange={newYear => {
                  const now = value.clone().year(newYear);
                  onChange(now);
                  // console.log(onChange(now))
                }}
                value={String(year)}
              >
                {options}
              </a-select>

              <a-select
                dropdownMatchSelectWidth={false}
                value={String(month)}
                onChange={selectedMonth => {
                  const newValue = value.clone();
                  newValue.month(parseInt(selectedMonth, 10));
                  onChange(newValue);
                }}
              >
                {monthOptions}
              </a-select>
            </a-col>
          </a-row>
        </div>
      );
    },
  },
};
</script>
<style scoped>
.events {
  list-style: none;
  margin: 0;
  padding: 0;
}

.events .ant-badge-status {
  overflow: hidden;
  white-space: nowrap;
  width: 100%;
  text-overflow: ellipsis;
  font-size: 12px;
}

.notes-month {
  text-align: center;
  font-size: 28px;
}

.notes-month section {
  font-size: 28px;
}

/deep/ .ant-fullcalendar-header {
  padding-left: 10px;
  text-align: left;
}

.my-year-select {
  margin-right: 10px;
}

/deep/ .ant-fullcalendar-cell {
  border: 1px solid #ccc;
}

/deep/ .ant-fullcalendar-fullscreen .ant-fullcalendar-date {
  margin: 0;
}

/deep/ .ant-fullcalendar-fullscreen .ant-fullcalendar-value {
  text-align: left;
}

/deep/ .ant-fullcalendar-fullscreen .ant-fullcalendar-column-header {
  text-align: left;
}

/deep/ .ant-fullcalendar-fullscreen .ant-fullcalendar-content {

}

/deep/ .events .ant-badge-status {
  text-align: center;
  line-height: 80px;
}

/deep/ .ant-fullcalendar-date:has(> ul.events) {
  background: red;
}

</style>